<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			a{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div id="dan">
			<form @submit.prevent="demo">
				<label for="zhang">账号:</label>
				<input type="text" id="zhang" v-model="account" placeholder="请输入用户名(占位提示)" />
				<br/>
				<br/>
				密码:<input type="password" v-model="pwd"/>
				<br/><br/>
				性别：
				<input type="radio" name="sex" value="男" v-model="sex">男
				<input type="radio" name="sex" value="女" v-model="sex">女<br />
				爱好：
				电影<input type="checkbox" v-model="hobby" value="电影">
				读书<input type="checkbox" v-model="hobby" value="读书">
				爬山<input type="checkbox" v-model="hobby" value="爬山">
				<br/><br/>
				所属地址:
				<select v-model="city">
					<option value="" >请选择地址</option>
					<option value="重庆" >重庆</option>
					<option value="四川" >四川</option>
					<option value="贵州" >贵州</option>
					<option value="北京" >北京</option>
					<option value="西安" >西安</option>
				</select>
				<br/><br/>
				其他信息
				<br/>
				<textarea v-model="other"></textarea>
				<br/><br/>
				<input type="checkbox" v-model="agree"/>阅读并接受协议<a href="https://t.bilibili.com/">《用户协议》</a>
				<br/><br/>
				<button type="submit" value="提交"> 提交 </button>
			</form>
		</div>
		<script type="text/javascript">
			var dan = new Vue({
				el:'#dan',
				data:{
					account:'',
					pwd:'',
					sex:'',
					hobby:[],
					city:'西安',
					other:'',
					agree:'',
				},
				methods:{
					demo(){
						console.info(this.account);
						// console.info(this.pwd);
						// console.info(this.sex);
						// console.info(this.hobby);
						// console.info(this._data);
						console.info(JSON.stringify(this._data));
					}
				}
			})
		</script>
	</body>
</html>
